<script>
import colors from '@/data/colors'

function evalColor(color) {
  color = color.replace('#', '')

  if (/^[0-9a-fA-F]{3}$/.test(color)) {
    color = color.split('')
    for (let i = 2; i >= 0; i--) {
      color.splice(i, 0, color[i])
    }
    color = color.join('')
  }
  if (/^[0-9a-fA-F]{6}$/.test(color)) {
    return {
      red: parseInt(color.slice(0, 2), 16),
      green: parseInt(color.slice(2, 4), 16),
      blue: parseInt(color.slice(4, 6), 16)
    }
  } else {
    return {
      red: 255,
      green: 255,
      blue: 255
    }
  }
}

function mixColor(color, percent) {
  color = colors[color] ? colors[color] : color
  let { red, green, blue } = evalColor(color)

  if (percent > 0) {
    red *= 1 - percent
    green *= 1 - percent
    blue *= 1 - percent
  } else {
    red += (255 - red) * percent
    green += (255 - green) * percent
    blue += (255 - blue) * percent
  }

  return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`
}
export default {
  name: 'GwTitle',
  functional: true,
  props: {
    content: String,
    color: String,
    tag: {
      type: String,
      default: 'div'
    }
  },
  render(h, { props, data, children }) {
    const color = props.color ? mixColor(props.color, 0) : ''
    data.is = props.tag
    data.class = [data.class, 'gw-title']
    return <component {...data}>
      { color
        ? <span class="inner" style={{ 'border-left-color': color }}>{children || props.content}</span>
        : <span class="inner">{children || props.content}</span>
      }
    </component>
  }
}
</script>

<style lang="scss">
@import "~@style";

.gw-title {
  > span {
    padding-left: $space;
    border-left: 5px solid $blue;
    transition: border-left-color .2s ease;
  }

  &.gap {
    margin-bottom: $space;
  }

  .ui-dark-mode & {
    > span {
      color: rgba($white, .6);
      border-left-color: darken($blue, $ui-color-darken-percent);
    }
  }

  // themes
  @each $prop, $value in $themes {
    &.#{$prop} > span {
      border-left-color: $value;
    }

    .ui-dark-mode &.#{$prop} > span {
      border-left-color: darken($value, $ui-color-darken-percent);
    }
  }
}
</style>
